<template>
	<div class="container">
		<!-- 一级磁贴 -->
		<div class="magnet-first" v-for="(item1,index) in magnetData" :key="index">
			<div class="group-name">{{item1.groupName}}</div>
			<!-- 右侧二级标题 -->
			<div class="magnet-two">
				<MagnetItem :magnet="item1.portlets" :mType="mType" :magnetStyle="magnetStyle" :magnetShortStyle="magnetShortStyle"></MagnetItem>
			</div>
		</div>
	</div>
</template>

<script>
	import MagnetItem from './magnet-item.vue'
	export default {
		name: 'TitleTop',
		components: {
			MagnetItem
		},
		props: {
			mType:{
				// default:()=>'1'
			},
			magnetStyle: {
				// default:function() {
				// 	return {}
				// }
			},
			magnetData: {
				// type: Array,
				// default: function() {
				// 	return []
				// }
			},
			magnetShortStyle: {

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;

		.magnet-first {
			position: relative;
			padding: 10px 21px;

			.group-name {
				width: 100%;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #ddd;
				font-size: 14px;
				color: #6c6c6c;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.magnet-two {
				width: 100%;
				margin-top: 12px;
				overflow: hidden;
			}
		}

		/*设置容器的滚动条样式*/
		&::-webkit-scrollbar {
			/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
			width: 4px;
			height: 4px;
		}

		&::-webkit-scrollbar-button {
			/*滚动条两端的按钮（位置2）*/
			display: none;
		}

		&::-webkit-scrollbar-track-piece {
			/*内层轨道，滚动条中间部分（位置4）*/
			width: 8px;
			background-color: #f5f5f5;
			border-radius: 6px;
		}

		&::-webkit-scrollbar-thumb {
			/*滚动条里面可以拖动的那部分（位置5）*/
			height: 50px;
			background: #bec7d5;
			border-radius: 6px;
		}

	}
</style>
